<template>
    <div class="swapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="item of swiperList" :key='item.id'>
                <img class="swiper-img" :src="item.imgUrl">
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  props:{
      swiperList:Array
  },
  data(){   //组件中写data，要写成函数，并return
      return{
          swiperOption:{
              pagination:'.swiper-pagination',
              loop:true
          }
      }
  }
  
}
</script>


<style lang='stylus' scoped>
// 样式穿透
.wrapper >>> .swiper-pagination-bullet-active
  background:#fff
.swiper-img 
    width:100%

</style>
